<template>
	<view class="content">
		<List :url="url" :list.sync="list" :type='type' @look="_handleLook" :v-model:isChecked="isChecked"
			@delete="_handleDelete" @transmit="_handleTransmit" @click-item="_handleLook">
			<template v-slot:search>
				<view style="margin: 20rpx 0;">
					<uni-search-bar placeholder="搜索" :show-action="false" :input-style="{ fontSize: '28rpx' }"
						:height="50" v-model:modelValue="queryParam.what"></uni-search-bar>

				</view>
				<view style="display: flex;justify-content: center;align-items: center;margin-top: 20rpx;">
					<button size="mini" :hover-class="'buttons'"
						:style="{ width: '200rpx', backgroundColor: '#0097ff', border: 'none', color: '#fff', fontSize: '32rpx' }"
						@click="search">查询</button>
				</view>
			</template>
			<template v-slot:content="{ item }">
				<view class="list_item_info">
					<view class="list_item_info_item">
						<view class="title word-overflow">
							<view :style="{ fontWeight: item.readed ? '' : 'bold' }">{{ item.subject }}</view>
						</view>
						<view>
							{{ item.sender }}
						</view>
					</view>
					<view class="list_item_info_item">
						<view class="send_time">
							{{ item.sendTime }}
						</view>
					</view>
				</view>
			</template>
		</List>
		<TkiTree idKey="value" rangeKey="text" :range="moveOptions" ref="showMoveRef" @confirm="handleSelectMove"
			:multiple="false" key="showMove" />
		<TkiTree idKey="value" rangeKey="text" :range="readOptions" ref="showReadRef" @confirm="handleSelectRead"
			:multiple="false" key="showRead" />
		<view class="body_bottom" v-if="isChecked">
			<view @click="_handleCancel">
				取消
			</view>
			<view @click="_handleSelectAll">
				全选
			</view>
			<view @click="_handleDeleteBatch" style="color:red">
				删除
			</view>
			<view @click="handleShowRead">
				置为
			</view>
			<view @click="handleShowMove">
				移动到
			</view>
		</view>
	</view>
</template>

<script setup>
	import TkiTree from '@/components/tki-tree/tki-tree.vue'
	import List from '../common/list.vue'
	import {
		useExternalEmail
	} from '@/pages/use/useList';

	const url = {
		list: '/email/listCycle',
		delete: '/email/delMail',
		setReaded: '/email/setReaded',
		moveMail: '/email/moveMail'
	}
	const type = 'garbageBinbox'

	const {
		list,
		queryParam,
		isChecked,
		moveOptions,
		readOptions,
		search,
		_handleLook,
		_handleTransmit,
		_handleDelete,
		_handleSelectAll,
		_handleCancel,
		_handleDeleteBatch,
		handleSelectRead,
		handleShowRead,
		showReadRef,
		handleSelectMove,
		showMoveRef,
		handleShowMove,
	} = useExternalEmail({
		url,
		type
	})
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 100rpx;

		.list_item_info {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding: 20rpx;
			border-bottom: 1px solid rgba(0, 0, 0, .1);

			&_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 20rpx;

				.title {
					flex: 1;
					white-space: normal;
					word-break: break-all;
					font-weight: bold;
				}

				.send_time {
					color: #999;
				}
			}
		}

		.body_bottom {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		}
	}
</style>